import React,{useState,useEffect,useRef} from "react";
import LlxTable from 'components/LlxTable'
import LlxForm from 'components/LlxForm/index'
import { Form,Button,Select,Modal,DatePicker,Alert} from 'antd';


import {getThemePackagePublish} from 'api/index'
import classNames from "classnames";
const { RangePicker } = DatePicker;



function AddThemeFullDialog(props) {
  const {isModalVisible, setIsModalVisible,dictionaries,title,userName,multipleType} = props

  const [form] = Form.useForm();//新增
  
  const [loading,setLoading] = useState(false)
  const [total,setTotal] = useState(0)

  useEffect(()=>{
    isModalVisible&&getNewList()
  },[isModalVisible])// eslint-disable-line react-hooks/exhaustive-deps

  let columns = [
    {title: '名称',fixed:'left', dataIndex: 'lessonName',width:250, key: 'lessonName', align: 'center',render: (text, record) => {
         return <div className="operate_link_group text-nowrap">
           {text}
        </div>
   }},
    {title: '课程ID', dataIndex: 'lessonCode',width:150, key: 'lessonCode', align: 'center'},
    {title: '字母', dataIndex: 'letter',width:150, key: 'letter', align: 'center'},
    {title: '词汇', dataIndex: 'words',width:150, key: 'words', align: 'center'},
    {title: '题数', dataIndex: 'count',width:150, key: 'count', align: 'center'},
    {title: '拼读单词', dataIndex: 'lessonReading',width:150, key: 'lessonReading', align: 'center'},
    {title: '句型', dataIndex: 'sentencePattern',width:150, key: 'sentencePattern', align: 'center'},
    {title: '目标描述', dataIndex: 'remark',width:150, key: 'remark', align: 'center'},
    {title: '级别', dataIndex: 'levelName',width:100, key: 'levelName', align: 'center'},
    {title: '创建人',width:120, dataIndex: 'createBy', key: 'createBy', align: 'center',render: (text, record) => {
      return <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
        {text}
     </div>
    }},
    {title: '更新人',width:120, dataIndex: 'updateBy', key: 'updateBy', align: 'center',render: (text, record) => {
      return  <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
      {text}
   </div>
    }},
    {title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', align: 'center',width:150},
    {title: '操作',fixed:'right', dataIndex: 'operate', key: 'operate', align: 'center',width:100,render:(text, record)=>{
     return  <div className="text-link" onClick={()=>selectTheme(record.id)}>
       选择此主题课
  </div>
    }}
  ]
   
  // 判断单选还是多选去掉操作一栏
  if(multipleType){
    columns = columns.filter(i=>i.title!=='操作')
  }

  //分页数据
  const [pagination,setPagination] = useState({
    current:1,
    pageSize:10
  })

  //初始表格数据
  const [dataSource,setDataSource] = useState([])

  
  // 新增表单
  const newItem = [
    {label: '名称',type:'input', name: 'lessonName', span: 4 },
      {label: '级别', name: 'levelId', span: 5,render: () => {
        return <Select
        allowClear
        optionFilterProp="dictValue"
        showSearch
        fieldNames={{value:'id',label:'dictValue'}}
        placeholder={'请选择级别'}
        options={dictionaries.Level}
   >
   </Select> }},
      {label: '题数', name: 'subjectCount', span: 5,render: () => {
        return <Select
        allowClear
        optionFilterProp="dictValue"
        showSearch
        fieldNames={{value:'id',label:'dictValue'}}
        placeholder={'请选择题数'}
      options={dictionaries.CountNumber}
   >
   </Select> }},
      {label: '课程ID',type:'input', name: 'lessonCode', span: 5 },
      {label: '词汇',type:'input', name: 'words', span: 5 },
      {label: '目标描述',type:'input', name: 'remark', span: 4 },
      {label: '句型',type:'input', name: 'sentencePattern', span: 5 },
      {label: '拼读单词',type:'input', name: 'lessonReading', span: 5 },
      {label: '字母',type:'input', name: 'letter', span: 5 },
      {label: '创建人', name: 'createBy',  span: 5,render: () => {
         return <Select
         allowClear
         optionFilterProp="userName"
         showSearch
         fieldNames={{value:'userName',label:'userName'}}
         placeholder={'请选择创建人'}
      options={dictionaries.UserSpecies}
    >
    </Select>
      }},
        {label: '更新人', name: 'updateBy',  span: 4,render: () => {
        return <Select
        allowClear
        optionFilterProp="userName"
        showSearch
        fieldNames={{value:'userName',label:'userName'}}
      placeholder={'请选择更新人'}
      options={dictionaries.UserSpecies}
    >
    </Select>
      }},
       {label: '更新时间', name: 'updateTime', span: 5 ,render: () => {
      return  <RangePicker showTime onChange={getUpdateTime} style={{width:'100%'}}/>
      }}
    ]

  //选择数据
  const [selectedRowKeys,setselectedRowKeys] = useState([])
  const rowSelection  = useRef({
    selectedRowKeys: selectedRowKeys,
    onChange: value => {
    setselectedRowKeys(value)
    rowSelection.current.selectedRowKeys = value
    }
  })
 
  // 用户点击选择将数据返回
  const selectTheme = (value) => {
    if(multipleType){
      // 多选
      props.returnThemeId(selectedRowKeys)
    } else {
      // 单选
      props.returnThemeId(value)
    }
  }
  
  // 获取数据
  const getNewList = async(value) => {
    setLoading(true)
    const params = JSON.parse(JSON.stringify(form.getFieldValue()))
    params.currPage=value&&value.pageSize?value.current:pagination.current
    params.pageSize=value&&value.pageSize?value.pageSize:pagination.pageSize
    params.upperLower = 1010
  
    const res = await getThemePackagePublish(params)

    setDataSource(res.result.records)

    setTotal(res.result.total)

    setLoading(false)
  }
  
  // 关闭
  const onCancel = () => {
    setIsModalVisible(false)
  }

    // 获取时间
  const getUpdateTime = (value,dataString) => {
  const data = form.getFieldValue()
  data.startTime=dataString[0]
  data.endTime=dataString[1]
  form.setFieldsValue(data)
  }
  
  
  return   <Modal  wrapClassName="modal-full"   visible={isModalVisible} footer={null} onCancel={onCancel}>
        
        <div className="full-modal-title">
          <Alert message={title} type="success" />
        </div>
       
       {/* 搜索表单加表格 */}
       <LlxForm form={form} labelCol={7} formItem={newItem} />

       <div style={{marginBottom:'10px'}}>
         <Button type={'primary'} onClick={getNewList}>查询</Button>
        {
           multipleType?<Button style={{marginLeft:'20px'}} type={'primary'} onClick={selectTheme}>添加选中的主题课</Button>:''
        }
       </div>

       {
         multipleType?<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         rowSelection={rowSelection.current}
         height={400}
         getNewList={getNewList}
         total={total}
         columns={columns}
         dataSource={dataSource}/>:<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         height={400}
         total={total}
         getNewList={getNewList}
         columns={columns}
         dataSource={dataSource}/>
       }
   </Modal>
}

export default AddThemeFullDialog